<template>
  <div class="content">
    <h2>生命周期函数</h2>
    <h2>{{ message }} - {{ count }}</h2>
    <button @click="message = 'Hello Vue'">修改message</button>
    <button @click="count++">修改count</button>

    <div>
      <button @click="isShowHome = !isShowHome">隐藏Home组件</button>
    </div>
    <Home v-if="isShowHome" />
  </div>
</template>

<script>
  import Home from "./Home.vue";
  export default {
    components: {
      Home
    },
    // 1. 组件创建之前
    data() {
      return {
        message: "Hello App",
        count: 0,
        isShowHome: true
      }
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    // 2. 组件创建完成
    created() {
      console.log("组件创建完成");
      // 组件创建完成后,就可使用data中的数据,发送网络请求
      console.log("发送网络请求");
      // 监听事件
      console.log("监听事件eventBus");
      // 监听数据
      console.log("监听watch数据");
      // 这里不用操作DOM,因为DOM还没有被渲染
    },
    // 3. 组件template准备挂载, 组件将要挂载
    beforeMount() {
      console.log("beforeMount");
    },
    // 4. 组件template被挂载,组件挂载完成, 虚拟DOM已经渲染成真实DOM
    mounted() {
      console.log("mounted");
      console.log("获取DOM元素");
      console.log("操作DOM元素");
    },
    // 5. 数据发生改变,组件将要更新,准备更新DOM
    beforeUpdate() {
      console.log("beforeUpdate");
    },
    // 6. 组件更新完成
    updated() {
      console.log("updated");
    },
    // 7. 准备卸载VNode,DOM,组件将要销毁
    beforeUnmount() {
      console.log("beforeUnmount");
    },
    // 8. DOM 元素卸载完成,组件销毁完成
    unmounted() {
      console.log("unmounted");
    }
  }
</script>

<style scoped>
</style>